import { Component } from 'react';
import { View,Text } from '@tarojs/components'
import Iconfont from '@/components/Iconfont'
import dayjs from 'dayjs'
import { staticUrl } from '@/utils'
import classnames from 'classnames'
import './index.scss'

const couponBg1 = staticUrl('/img/service/coupon-1.png')
const couponBg2 = staticUrl('/img/service/coupon-2.png')

interface Props {
    list: GlobalCoupon.Coupon
    disable?: boolean
    handleEvent?: any
    style?: number | string
}

export default class couponView extends Component<Props, any> {

    constructor() {
        super(...arguments)
    }

    UNSAFE_componentWillMount() { }

    componentDidMount() { }

    UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    componentDidCatchError() { }

    componentDidNotFound() { }
    private isHandle: boolean = false
    private clearHandleStatus
    handleEvent(list, e) {
        if (this.isHandle) return
        this.isHandle = true
        if (this.clearHandleStatus) {
            clearTimeout(this.clearHandleStatus)
        }
        const {
            handleEvent,
            disable
        } = this.props
        // if (disable) return
        if (handleEvent) {
            handleEvent(list, e)
            this.clearHandleStatus = setTimeout(() => this.isHandle = false, 1500)
        }
    }
    render() {
        const { list, disable, style } = this.props
        return list && (
            <View className='coupon-info'>
                <View style={`background-image: url(${list.type === 2 ? couponBg2 : couponBg1})`} onClick={(e) => this.handleEvent(list, e)} className={classnames('tab-cont-item-li', disable && 'grayscale')}>
                    {list.label && (
                        <View className='coupon-tips-block'>
                            {list.label}
                        </View>
                    )}
                    <View className='price'>
                        {
                            list.discountType === 1 ? <View className='strong'>￥{list.baseAmount}</View> : <View className='strong name'>商品券</View>
                        }
                        {list.minPrice > 0 && <View className='sub-tips'>满{list.minPrice}元可用</View>}
                    </View>
                    <View className='coupon-info-wrap'>
                        <View className='tab-cont-bd'>
                            <View className='context'>
                                <View className='coupon-name'>
                                    <View className='strong'>{list.name}</View>
                                </View>
                                <View className={classnames('coupon-type', {
                                    'hezuo': list.type === 3
                                })}
                                >
                                    {list.type === 1 && <Iconfont size='24' name='icon-zu21' />}
                                    {list.type === 2 && <Iconfont size='24' name='icon-zu26' />}
                                    {list.type === 3 && <Iconfont size='24' name='icon-zu18' />}
                                    {list.typeLabel}
                                </View>
                                {
                                    list.carLicenseLimit &&
                                    <View className='msgtext'>
                                        限{list.carLicenseLimit}使用
                                    </View>
                                }
                                <View className='msgtext'>
                                    {dayjs.unix(list.startAt).format('YYYY.MM.DD') + '-' + dayjs.unix(list.endAt).format('YYYY.MM.DD')}
                                </View>
                            </View>
                        </View>
												<View className='use-label'>
														<Text>{list.canUsedAreaLabel}</Text>
												</View>
                        {
                            style != 2 && list.isUsed != 0 && (
                                <View className='tab-cont-bt'>

                                    <View className='gotext'>
                                        去使用
                                        <View className='arw'></View>
                                    </View>
                                </View>
                            )
                        }
                    </View>
                </View>
            </View>
        )
    }
}
